<template>
	<div class="s_out">
		<div class="s_left">
			<van-field
			  readonly
			  clickable
			  name="picker"
			  :value="label"
			  label=""
			  required
			  :placeholder="$t('message.xexgf')"
			  @click="showPicker = true"
			  :rules="[{ required: true, message: this.$t('message.p-qxz') }]"
			/>
			<van-popup v-model="showPicker" maxlength="128" position="bottom">
			  <van-picker
			    show-toolbar
			    :columns="columns"
			    @confirm="onConfirm"
			    @cancel="showPicker = false"
			  />
			</van-popup>
		</div>
		<div class="s_right">
			<van-field
			  label=""
			  v-model="obj.value"	
			  :placeholder="message"
			  :rules="[{ required: true, message:message }]"
			/>
		</div>
		<div class="delet" @click="delParties">x</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
			    columns: [
					{
						text:this.$t('message.cgs'),
						value:'1'
					},
					{
						text:this.$t('message.gys'),
						value:'2'
					}
					 ],
			    showPicker: false,
				message:this.$t('message.p-cgs'),
				obj:{
					type:'',
					value:'',
				},
				label:''
			}
		},
		props:['itemData'],
		watch:{
			itemData:function(val){
				// console.log(val)
			}
		},
		mounted() {
			if(this.itemData.type){
				this.obj = this.itemData
				if(this.obj.type=='1'){
					 this.label = this.$t('message.cgs')
				}else if(this.obj.type=='2'){
					this.label = this.$t('message.gys')
				}
			}
		},
		methods:{
			delParties(){
				this.$emit('delParties')
			},
			onConfirm(value) {
				if(value=='1') this.placeholder = this.$t('message.p-cgs')
				if(value=='2') this.placeholder = this.$t('message.p-gys')		
			    this.label = value.text;
				this.obj.type = value.value
				console.log(this.obj)
			    this.showPicker = false;
			},
		}
	}
</script>

<style>
	.s_out{
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	.delet{
		position: absolute;
		bottom: -2px;
		right: 16px;
		font-size: 22px;
		color: #ccc;
	}
	.s_left{
		float: left;
		width: 30%;
	}
	.s_right{
		float: right;
		width: 70%;
	}
</style>
